<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item>支付管理</el-breadcrumb-item>
    <el-breadcrumb-item>支付列表</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 卡片视图区域 -->
  <el-card>
    <el-row :gutter="20">
      <el-col :span="24">
        <el-table :data="payInfoList" border stripe style="width: 100%">
          <el-table-column prop="id" label="编号" width="150"/>
          <el-table-column prop="user.username" label="用户名" width="150"/>
          <el-table-column prop="orderNo" label="订单号" width="200"/>
          <el-table-column label="平台类型" width="150">
            <template #default="scope">
              <span v-if="scope.row.payPlatform == 1">
                支付宝
              </span>
              <span v-else-if="scope.row.payPlatform == 2">
                微信
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="platformNumber" label="支付流水号" width="400"/>
          <el-table-column prop="platformStatus" label="支付状态"/>
        </el-table>
      </el-col>
    </el-row>

    <!-- 分页的行 -->
    <el-row>
      <el-col :span="24">
        <el-pagination
            v-model:current-page="queryInfo.currentPage"
            v-model:page-size="queryInfo.pageSize"
            :page-sizes="[2, 4, 6, 8]"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
  </el-card>
</template>

<script>

import { onMounted, getCurrentInstance } from "vue";

import { getPayInfoList } from "../../api/payInfo.js";

export default {
  name: "Pay",
  data(){
    return {
      queryInfo: {
        currentPage: 1,
        pageSize: 2,
      },
      total: 100,
      disabled: false,
      background: false,
      payInfoList: [
        {
          "id": 53,
          "userId": 1,
          "orderNo": 1492090946105,
          "payPlatform": 1,
          "platformNumber": "2017041321001004300200116250",
          "platformStatus": "WAIT_BUYER_PAY",
          "createTime": "2017-04-13 13:42:33",
          "updateTime": "2017-04-13 13:42:33",
          "user": {
            "id": 1,
            "username": "admin",
            "password": null,
            "email": "admin@happymall.com",
            "phone": "13800138000",
            "question": "问题",
            "answer": "答案",
            "role": 0,
            "createTime": "2016-11-06 08:56:45",
            "updateTime": "2017-04-04 11:27:36"
          }
        }]
    }
  },
  methods: {
    // 改变页码时触发的函数
    handleCurrentChange(val){
      console.log(val);
      // 将修改后的当前页的值赋值给queryInfo.currentPage
      this.queryInfo.currentPage = val;
      // 刷新数据
      this.loadPayInfoData();
    },
    // 改变页大小时触发的函数
    handleSizeChange(val){
      console.log(val);
      // 将修改后页大小的值赋值给queryInfo.pageSize
      this.queryInfo.pageSize = val;
      // 刷新数据
      this.loadPayInfoData();
    },
    async loadPayInfoData(){
      // const { data: ret } = await getPayInfoList({currentPage: 1, pageSize: 2});
      const { data: ret } = await getPayInfoList(this.queryInfo);
      console.log(ret);
      this.payInfoList = ret['data']['data'];
      this.total = ret['data']['total'];
    }
  },
  setup(){
    const { ctx } = getCurrentInstance();
    onMounted(() => {
      ctx.loadPayInfoData();
    });
  }
}
</script>

<style scoped>

</style>